<ui:composition template="/template/templateSGRUsuario.xhtml" 
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:param name="param" value="nuevaCuenta"/>
    <ui:define name="index">

        <h:form id="form-#{param}">

            <p:growl id="msg#{param}" autoUpdate="true" />

            <article id="content">
                <div class="wrap">
                    <div class="box">
                        <div>
                            <h2 class="letter_spacing">Crea tu <span>Cuenta!</span></h2>
                            <p:selectBooleanCheckbox value="#{pCConsultaUsuario.condicion}" >
                                <p:ajax event="change" update="btnadd#{param}"/>  
                            </p:selectBooleanCheckbox>  
                            <h:outputText value="Para crear su cuenta tiene que estar de acuerdo con las "/>
                            <p:commandLink id="condiciones" immediate="true" value="Condiciones del Servicio y las Políticas de Privacidad"/>
                            <h:outputText value=" de Deliccio."/>
                            <p:overlayPanel id="overCondiciones" for="condiciones" style="width :500px" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"  > 
                                <h:panelGrid  >
                                    <h4> Condiciones del Serivicio</h4>
                                    El sitio web de Deliccio incluye contenido que ha sido creado específicamente para el mismo. Todos los materiales publicados en el sitio, son propiedad intelectual de Deliccio (excluyendo la imagen de error que es propiedad intelectual de Pixar).  No se puede modificar, publicar, transmitir, o sacar provecho del contenido de  nuestro sitio web en ningún sitio. 
                                    <h4> Políticas de Privacidad.</h4>
                                    Deliccio trata la privacidad de sus usuarios con el mayor respeto. Nos reservamos el derecho de recolectar información de nuestros usuarios mediante nuestro sitio web así como por nuestras redes sociales para poder mejorar la experiencia del usuario. No compartiremos su información con terceros. 
                                    La información personal de los usuarios está amparada por la ley 18.331 de Protección de Datos Personales, pudiendo en todo momento solicitar su información personal, así como que se eliminen los datos personales del sitio. 

                                </h:panelGrid>
                            </p:overlayPanel>
                            <p:panelGrid columns="1" id="panel-dialogo-grid#{param}Nuevo" styleClass="externo">

                                <p:focus context="panel-dialogo-grid#{param}Nuevo"/>

                                <p:wizard id="tabViewNuevo#{param}" backLabel="Atrás" nextLabel="Siguiente">

                                    <p:tab title="1. Datos Personales"  titletip="Ingresa tus datos personales">
                                        <p:panelGrid columns="2" id="panel1N-dialogo-grid#{param}" styleClass="grid-modal">
                                            <p:outputLabel value="(*)Nombre:" />
                                            <p:inputText id="nombre#{param}" value="#{pCConsultaUsuario.nombre}" size="40" maxlength="40" required="true" requiredMessage="El campo Nombre es obligatrio"  
                                                         tabindex="1"/>
                                            <p:outputLabel value="(*)Apellido:" />
                                            <p:inputText id="apellido#{param}" value="#{pCConsultaUsuario.apellido}" size="40" maxlength="40" required="true" requiredMessage="El campo Apellido es obligatrio"  
                                                         tabindex="2"/>
                                            <p:outputLabel value="(*)Email:" />
                                            <p:inputText id="email#{param}" value="#{pCConsultaUsuario.email}" size="40" required="true" requiredMessage="El campo Email es obligatrio" validatorMessage="El campo Email no es v&#225;lido. Ejemplo: ejemplo@algo.com"
                                                         tabindex="5">
                                                <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
                                            </p:inputText>
                                            <p:outputLabel value="Tel&#233;fono:" styleClass="sinAster" />
                                            <p:inputMask id="telefono#{param}" value="#{pCConsultaUsuario.telefono}" mask="99999999" tabindex="6"/>
                                            <p:outputLabel value="Celular:" styleClass="sinAster" />
                                            <p:inputMask id="celular#{param}" value="#{pCConsultaUsuario.celular}" mask="099999999" tabindex="7"/>
                                            <p:outputLabel value="Fecha de Nacimiento:" styleClass="sinAster" />  
                                            <p:calendar value="#{pCConsultaUsuario.fechaNac}" id="fechaNac#{param}" size="10" label="Fecha Nacimiento"
                                                        pattern="dd/MM/yyyy" maxlength="10" navigator="true" effect="explode" 
                                                        maxdate="#{pCConsultaUsuario.fechaActual}" readonlyInput="true" />
                                            <p:outputLabel value="RUT:" styleClass="sinAster"/>
                                            <p:inputText id="rut#{param}" value="#{pCConsultaUsuario.rut}" size="30" label="RUT" tabindex="9" maxlength="14">
                                                <f:convertNumber integerOnly="true"/>
                                            </p:inputText>

                                        </p:panelGrid>
                                    </p:tab><p:tab title="2. Datos de Direcci&#243;n" titletip="Ingresa los datos de tu dirección">
                                        <p:panelGrid columns="2" id="panel2-dialogo-grid#{param}" styleClass="grid-modal">
                                            <h:outputLabel value="(*)Departamento:" />
                                            <p:selectOneMenu id="departamento#{param}"  value="#{pCConsultaUsuario.departamento}" style="width: 150px;margin-left:4px;" required="true" requiredMessage="Debe seleccionar un departamento" >
                                                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                                                <f:selectItems value="#{departamentos.depatamentos}" />
                                            </p:selectOneMenu>
                                            <h:outputLabel value="(*)Ciudad:" />
                                            <p:inputText size="40" id="ciudad#{param}" value="#{pCConsultaUsuario.ciudad}" maxlength="40" required="true" requiredMessage="El campo Ciudad es obligatrio" />
                                            <h:outputLabel value="(*)Calle:" />
                                            <p:inputText size="40" id="calle#{param}" value="#{pCConsultaUsuario.calle}" maxlength="40" required="true" requiredMessage="El campo Calle es obligatrio" />
                                            <h:outputLabel value="(*)Nro. Puerta:" />
                                            <p:inputText id="numero#{param}" value="#{pCConsultaUsuario.numero}" required="true"
                                                         requiredMessage="El campo Número es obligatrio" label="Nro. Puerta" maxlength="4" size="4">
                                                <f:convertNumber integerOnly="true"/>
                                            </p:inputText>
                                            <h:outputLabel value="Detalles:"  styleClass="sinAster"/>
                                            <p:inputTextarea cols="42" rows="4" autoResize="false" maxlength="255" id="detalles#{param}" value="#{pCConsultaUsuario.detalle}" />
                                        </p:panelGrid>
                                    </p:tab><p:tab title="3. Datos de Usuario"  titletip="Ingresa los datos de tu nueva cuenta">
                                        <p:panelGrid columns="2" id="panel3-dialogo-grid#{param}" styleClass="grid-modal">
                                            <h:outputLabel value="(*)Nombre de Usuario:" />
                                            <p:inputText size="40" id="nombreUsuario#{param}" value="#{pCConsultaUsuario.nombreUsuario}" maxlength="40" required="true" requiredMessage="El campo Nombre de Usuario es obligatrio" />
                                            <h:outputLabel value="(*)Contrase&#241;a:" />  
                                            <p:password id="contrasenia#{param}" value="#{pCConsultaUsuario.contrasenia}" feedback="true"
                                                        promptLabel="Ingrese una contrase&#241;a" weakLabel="D&#233;bil"  
                                                        goodLabel="Buena" strongLabel="Fuerte" match="contraseniaRe#{param}" required="true" 
                                                        label="Contrase&#241;a" requiredMessage="El campo Contrase&#241;a es obligatrio"
                                                        validatorMessage="No coincide la contrase&#241;a" />
                                            <h:outputLabel value="(*)Confirmar Contrase&#241;a:" />
                                            <p:password id="contraseniaRe#{param}" value="#{pCConsultaUsuario.contrasenia}" required="true" 
                                                        label="Confirmar Contrase&#241;a" requiredMessage="El campo Confirmar Contrase&#241;a es obligatrio" />
                                        </p:panelGrid>

                                        <p:commandLink 
                                            update="msg#{param}"
                                            disabled="#{!pCConsultaUsuario.condicion}"
                                            action="#{pCConsultaUsuario.crearCuenta()}"
                                            style="float: right;" 
                                            id="btnadd#{param}" styleClass="button1">
                                            <h:outputText value="Guardar"  /> 
                                        </p:commandLink>
                                    </p:tab>
                                </p:wizard>
                            </p:panelGrid>

                        </div>

                    </div>

                </div>
            </article>

        </h:form>

    </ui:define>
</ui:composition>